<template>
  <div class="container">
    <div class="header">交易信息</div>
    <categoryRanking/>
    <transactionClassStatistics/>
    <broadClassDistribution/>
    <monthlyDistribution/>
    <transactionDetail/>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import categoryRanking from './components/categoryRanking.vue'
import transactionClassStatistics from './components/transactionClassStatistics.vue'
import broadClassDistribution from './components/broadClassDistribution.vue'
import monthlyDistribution from './components/monthlyDistribution.vue'
import transactionDetail from './components/transactionDetail.vue'
export default {
  components:{
    categoryRanking,
    transactionClassStatistics,
    broadClassDistribution,
    monthlyDistribution,
    transactionDetail
  },
  props: {
    type: {
      type: String | Number,
    },
    customerId: {
      type: String,
    },
  },
  data() {
    return {
      radio1: '总笔数',
      radio2: '今年以来',
      radio3: '买入',
      rankingRadio1:'今年以来',
      value1: '',
      selectedValue: '',
      options: [],
      
      distributionTableData: [
        {
          transactionClass: '股票',
          count: '14',
          countProportion: '3.5',
          money: '3.5',
          moneyProportion: '3.5',
        },
        {
          transactionClass: '基金',
          count: '14',
          countProportion: '3.5',
          money: '3.5',
          moneyProportion: '3.5',
        },
        {
          transactionClass: '债券',
          count: '14',
          countProportion: '3.5',
          money: '3.5',
          moneyProportion: '3.5',
        },
      ],
      dealTableData: [
        {
          transactionClass: '股票',
          subTradeType: '18',
          tradeDate: '2024-01-31',
          tradeDirection: '买',
          tradeAmount: '4.1',
          groupTradeType: '4.1',
          groupTradeName: '4.1',
        },
        {
          transactionClass: '债券',
          subTradeType: '18',
          tradeDate: '2024-01-31',
          tradeDirection: '买',
          tradeAmount: '4.1',
          groupTradeType: '4.1',
          groupTradeName: '4.1',
        },
        {
          transactionClass: '基金',
          subTradeType: '18',
          tradeDate: '2024-01-31',
          tradeDirection: '买',
          tradeAmount: '4.1',
          groupTradeType: '4.1',
          groupTradeName: '4.1',
        },
      ],
      tableData:[]
    };
  },
  mounted() {
   
    // this.pie1Init();
    // this.pie2Init();
    // this.monthlyDistributionInit();
    // this.getMaturityAmountMonthlyDistributionData();
    // this.getTradeInfoByTradeTypeTotalData();
    // window.addEventListener('resize', () => {
    //   console.log('resize');
    //   this.statisticsInit();
    //   this.pie1Init();
    //   this.pie2Init();
    // });
  },
  // created() {
  //   this.$nextTick(() => {
  //     this.statisticsInit();
  //     this.pie1Init();
  //     this.pie2Init();
  //   });
  // },
  methods: {
    // rankingRadio1Change(value){
    //   console.log(value);
    // },
   
    // pie1Init() {
    //   let chartDom = document.getElementById('pie1');
    //   let myChart = echarts.init(chartDom);
    //   let option;
    //   option = {
    //     tooltip: {
    //       trigger: 'item',
    //     },
    //     series: [
    //       {
    //         name: 'Access From',
    //         type: 'pie',
    //         radius: '50%',
    //         data: [
    //           { value: 1048, name: '交易大类1 3.5%,14笔' },
    //           { value: 735, name: '交易大类2 3.5%,14笔' },
    //           { value: 580, name: '交易大类3 3.5%,14笔' },
    //           { value: 484, name: '交易大类4 3.5%,14笔' },
    //           { value: 300, name: '交易大类5 3.5%,14笔' },
    //         ],
    //         itemStyle: {
    //           // 为每一块设置颜色
    //           normal: {
    //             color: function (params) {
    //               // 自定义颜色
    //               var colorList = [
    //                 '#fff',
    //                 '#08b0f0',
    //                 '#ffff03',
    //                 '#f4b183',
    //                 '#a9d18e',
    //               ];
    //               return colorList[params.dataIndex];
    //             },
    //           },
    //         },
    //       },
    //     ],
    //   };
    //   myChart.setOption(option);
    // },
    // pie2Init() {
    //   let chartDom = document.getElementById('pie2');
    //   let myChart = echarts.init(chartDom);
    //   let option;
    //   option = {
    //     tooltip: {
    //       trigger: 'item',
    //     },
    //     series: [
    //       {
    //         name: 'Access From',
    //         type: 'pie',
    //         radius: '50%',
    //         data: [
    //           { value: 1048, name: '交易大类1 3.5%,14笔' },
    //           { value: 735, name: '交易大类2 3.5%,14笔' },
    //           { value: 580, name: '交易大类3 3.5%,14笔' },
    //           { value: 484, name: '交易大类4 3.5%,14笔' },
    //           { value: 300, name: '交易大类5 3.5%,14笔' },
    //         ],
    //         itemStyle: {
    //           // 为每一块设置颜色
    //           normal: {
    //             color: function (params) {
    //               // 自定义颜色
    //               var colorList = [
    //                 '#fff',
    //                 '#08b0f0',
    //                 '#ffff03',
    //                 '#f4b183',
    //                 '#a9d18e',
    //               ];
    //               return colorList[params.dataIndex];
    //             },
    //           },
    //         },
    //       },
    //     ],
    //   };
    //   myChart.setOption(option);
    // },
    // monthlyDistributionInit() {
    //   let chartDom = document.getElementById('monthlyDistribution');
    //   let myChart = echarts.init(chartDom);
    //   let option;
    //   option = {
    //     xAxis: {
    //       type: 'category',
    //       boundaryGap: false,
    //       tooltip: {
    //         trigger: 'axis',
    //       },
    //       data: [
    //         '2021-12-01',
    //         '2022-03-01',
    //         '2022-06-01',
    //         '2022-09-01',
    //         '2022-12-01',
    //         '2023-3-01',
    //         '2023-06-01',
    //         '2023-09-01',
    //         '2023-12-01',
    //       ],
    //       axisLabel: {
    //         color: '#fff',
    //       },
    //       axisLine: {
    //         lineStyle: {
    //           color: '#fff',
    //         },
    //       },
    //     },
    //     yAxis: {
    //       type: 'value',
    //       axisLabel: {
    //         color: '#fff',
    //       },
    //       min: 0,
    //       max: 25,
    //       interval: 5,
    //       axisLine: {
    //         show: false,
    //       },
    //     },
    //     series: [
    //       {
    //         data: [8, 2, 23, 11, 14, 12, 10, 11, 14],
    //         type: 'line',
    //         lineStyle: {
    //           color: '#fff',
    //           width: 1,
    //         },
    //         symbol: 'none',
    //       },
    //     ],
    //   };
    //   myChart.setOption(option);
    // },
    // async getMaturityAmountMonthlyDistributionData() {
    //   const params = {
    //     counterpartyId: '',
    //     tradeDirection: '',
    //     startDate: '',
    //     endDate: '',
    //   };
    //   const { data } = await getMaturityAmountMonthlyDistribution(params);
    //   console.log('交易大类', data);
    //   this.distributionTableData = data.records;
    // },
    // async getTradeInfoByTradeTypeTotalData() {
    //   const params = {
    //     counterpartyId: '',
    //     tradeDirection: '',
    //     startDate: '',
    //     endDate: '',
    //   };
    //   const { data } = await getTradeInfoByTradeTypeTotal(params);
    //   console.log('总和', data);
    // },
    // async getTradeInfoStatisticsByTradeDirectionData() {
    //   const params = {
    //     counterpartyId: '',
    //     tradeDirection: '',
    //     startDate: '',
    //     endDate: '',
    //   };
    //   const { data } = await getTradeInfoStatisticsByTradeDirection(params);
    //   console.log('交易大类统计', data);
    // },
   
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 160px);
  overflow: scroll;
  .header {
    background: #354060;
    line-height: 50px;
    padding-left: 20px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
  }
  .module {
    padding: 14px;
  }
  .content {
    border: 1px solid #39517f;
    padding: 14px;
    .top {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  }
  .group_table {
    display: flex;
    justify-content: space-around;
  }
  .title {
    line-height: 18px;
    border-left: 5px solid #08b0f0;
    padding-left: 16px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .table {
    margin-top: 10px;
    border: 1px solid #39517f;
  }
  .table_echarts {
    .pie_echarts {
      width: 100%;
    }
  }

  
  #pie1 {
    width: 100%;
    flex: 1;
    height: 220px;
  }
  #pie2 {
    width: 100%;
    flex: 1;
    height: 220px;
  }
  #monthlyDistribution {
    width: 100%;
    flex: 1;
    height: 220px;
  }
  ::v-deep {
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #8c97bb;
    }
    .el-radio-button__inner {
      background-color: #1b2238;
      border-color: #6794df;
      color: #fff;
    }
    .el-date-editor--monthrange.el-input,
    .el-date-editor--monthrange.el-input__inner {
      width: 200px;
      line-height: 28px;
    }
    .el-input__inner,
    .el-date-editor .el-range-input {
      background-color: #1b2238;
      border-color: #6794df;
    }
    .el-range-editor.el-input__inner {
      height: 28px;
    }
    .el-date-editor .el-range__icon,
    .el-date-editor .el-range__close-icon {
      line-height: 0;
    }
  }
}
</style>
